﻿<%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>

<script>
	var datas = {};
	var dataUpdate = {};
	var addAccount = "<span class='icon-plus-2'>&nbsp;</span>เพิ่มผู้ใช้งานระบบ";
	var updateAccount = "<span class='icon-pencil'>&nbsp;</span>แก้ไขข้อมูลผู้ใช้งานระบบ";
	$(function(){
		$("#btnUpdate").hide();
		$("#headerPanel").html(addAccount);
		$("#txtUsername").focus();
		$(document).ready(function(){
			$.ajax({
	            url : '${pageContext.request.contextPath}/backend/account/getAll',
	            type: "POST",
	            async: false,
	            success : function(data) {
					if(data.success){
						var tbody = "";
						if(data.code === "0000"){
							datas = data.datas;
							$.each(data.datas, function(key, value) {
								var i=key;
								var status = "";
								if(value.status === 1){
									status = "ใช้งาน";
								}else{
									status = "ไม่ใช้งาน";
								}
								key = key + 1;
								tbody += "<tr>";
								tbody += "<td>" + key + "</td>";
								tbody += "<td align='left'>" + value.titleName + value.fullname + "</td>";
								tbody += "<td align='left'>" + value.email + "</td>";
								tbody += "<td align='left'>" + value.username + "</td>";
								tbody += "<td align='left'>" + value.tel + "</td>";
								tbody += "<td>" + status + "</td>";
								tbody += "<td><span class='link on-left pointer-cursor' onclick='updateData("+i+")'><span class='icon-pencil'></span></span>" + 
									"<span class='link pointer-cursor' onclick='deleteData("+i+")'><span class='icon-remove'></span></span></td>";
								tbody += "</tr>";
							});
						}else{
							tbody += "<tr>";
							tbody += "<td colspan='7' align='center' class='required'>" + data.msg + "</td>";
							tbody += "</tr>";
						}
						
						$("#tableAccount tbody").append(tbody);
					}else{
	            		$.alert(data.code, data.msg);
					}
	            },
	            error : function(data){
	            	$.alert(data.code, data.msg);
	            }
	        });
		});
		
		$("#btnCancel").click(function(){
			$("#headerPanel").html(addAccount);
			$("#btnUpdate").hide();
			$("#btnSubmit").show();
			$("input[id^='txt'").val("");
			$("select").find("option:first").prop("selected", true);
			$("#chkStatus").prop("checked", true);
		});
		
		$("#btnSubmit, #btnUpdate").click(function(){
			var id = $(this).attr("id");
			var status = $("#chkStatus").prop("checked") ? 1 : 0;
			var username = $("#txtUsername").val();
			var password = $("#txtPassword").val();
			var fullname = $("#txtFullname").val();
			var data = {};
			var url = "${pageContext.request.contextPath}/backend/account/add";		
			if(username === ""){
				$.alert("Warning", "โปรดระบุ Username");
				return false;
			}
			if(password === ""){
				$.alert("Warning", "โปรดระบุ Password");
				return false;
			}
			if(fullname === ""){
				$.alert("Warning", "โปรดระบุ ชื่อ-นามสกุล");
				return false;
			}	
			data = {username: username, password: password, titleName: $("#selectTitleName").val(), fullname: fullname,
				tel: $("#txtTel").val(), email: $("#txtEmail").val(), role: $("#selectRole").val(), status: status
			};
			if(id === "btnUpdate"){
				url = "${pageContext.request.contextPath}/backend/account/update";
				data = {id: dataUpdate.id, username: username, password: password, titleName: $("#selectTitleName").val(), fullname: fullname, tel: $("#txtTel").val(), 
					email: $("#txtEmail").val(), role: $("#selectRole").val(), status: status, createdBy: dataUpdate.createdBy, createdDate: dataUpdate.createdDate
				};
			}
			
			$.ajax({
	            url : url,
	            data: JSON.stringify(data),
	            type: "POST",
		        contentType: 'application/json',
		        //dataType: 'json',
	            success : function(data) {
					if(data.success){
						if(data.code === "0000"){
	            			$.alert(data.code, data.msg);
							window.location.reload(true);
						}else{
	            			$.alert(data.code, data.msg);
						}
					}else{
	            		$.alert(data.code, data.msg);
					}
	            },
	            error : function(data){
	            	$.alert(data.code, data.msg);
	            }
	        });
		});
	});
		
	function updateData(key){
		dataUpdate = datas[key];
		$("#headerPanel").html(updateAccount);
		$("#btnUpdate").show();
		$("#btnSubmit").hide();
		$("#txtFullname").val(dataUpdate.fullname);
		$("#txtUsername").val(dataUpdate.username);
		$("#txtPassword").val(dataUpdate.password);
		$("#selectTitleName").val(dataUpdate.titleName);
		$("#selectRole").val(dataUpdate.role);
		$("#txtTel").val(dataUpdate.tel);
		$("#txtEmail").val(dataUpdate.email);

		if(dataUpdate.status === 1){
			$("#chkStatus").prop("checked", true);
		}else{
			$("#chkStatus").prop("checked", false);
		}
		
	}
		
	function deleteData(key){
		dataUpdate = datas[key];
		$.Dialog({
			width: 250,
			overlay: true,
			shadow: true,
			flat: true,
			icon: '<div class="fg-black icon-warning"></div>',
			title: '<div class="fg-black bold" style="font-weight: bold;">ยืนยันลบข้อมูล</div>',
			content: $("#dlgDelete").html(),
			sysButtons:{
				btnClose: false
			}
		});
	}
		
	function remove_item(){
		$.ajax({
            url : "${pageContext.request.contextPath}/backend/account/delete",
            data: JSON.stringify(dataUpdate),
            type: "POST",
	        contentType: 'application/json',
	        //dataType: 'json',
            success : function(data) {
				if(data.success){
					if(data.code === "0000"){
            			$.alert(data.code, data.msg);
						window.location.reload(true);
					}else{
            			$.alert(data.code, data.msg);
					}
				}else{
            		$.alert(data.code, data.msg);
				}
            },
            error : function(data){
            	$.alert(data.code, data.msg);
            }
        });
	}
</script>
        <div id="content" class="content-data">
        	<!-- Content Data -->
            <div class="panel fg-black">
            	<div class="panel-header bg-cyan fg-white" style="font-size: 15px;"><span class="icon-newspaper">&nbsp;</span>ผู้ใช้งานระบบทั้งหมด</div>
                <div class="panel-content fg-black">
					<table id="tableAccount" width="100%">
						<thead>
							<tr>
								<td width="50px">ลำดับ</td>
								<td>ชื่อ-นามสกุล</td>
								<td width="250px">อีเมล์</td>
								<td width="250px">ชื่อผู้ใช้งานระบบ</td>
								<td width="100px">เบอร์โทรศัพท์</td>
								<td width="100px">สถานะ</td>
								<td width="80px">Actions</td>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
                </div>
            </div>
            <div class="panel">
            	<div class="panel-header bg-cyan fg-white" id="headerPanel"></div>
                <div class="panel-content fg-black">
					<table width="100%">
						<tr>
							<td class="table-header" width="200px" align="right"><span class="required">*</span>Username</td>
							<td align="left"><input type="text" id="txtUsername" name="txtUsername"></td>
						</tr>
						<tr>
							<td class="table-header"align="right"><span class="required">*</span>Password</td>
							<td align="left"><input type="password" id="txtPassword" name="txtPassword"></td>
						</tr>
						<tr>
							<td class="table-header" align="right">คำนำหน้าชื่อ</td>
							<td align="left">
								<select id="selectTitleName" >
									<option value="นาย">นาย</option>
									<option value="นาง">นาง</option>
									<option value="นางสาว">นางสาว</option>
								</select>
							</td>
						</tr>
						<tr>
							<td class="table-header" align="right"><span class="required">*</span>ชื่อ - นามสกุล</td>
							<td align="left"><input type="text" id="txtFullname" name="txtFullname"></td>
						</tr>
						<tr>
							<td class="table-header"align="right">เบอร์โทรศัพท์</td>
							<td align="left"><input type="text" id="txtTel" name="txtTel"></td>
						</tr>
						<tr>
							<td class="table-header"align="right">อีเมล์</td>
							<td align="left"><input type="text" id="txtEmail" name="txtEmail"></td>
						</tr>
						<tr>
							<td class="table-header"align="right">ระดับ</td>
							<td align="left">
								<select id="selectRole">
									<option value="ADMIN">Admin</option>
									<option value="GUEST">Guest</option>
								</select>							
							</td>
						</tr>
						<tr>
							<td class="table-header" align="right"><span class="required">*</span>สถานะ</td>
							<td align="left"><input type="checkbox" id="chkStatus" name="chkStatus" checked="checked"></td>
						</tr>
					</table>
					<div class="admin-button">
						<button class="button info" type="button" id="btnSubmit" name="btnSubmit">ตกลง</button>
						<button class="button info" type="button" id="btnUpdate" name="btnUpdate">ตกลง</button>
						<button class="button" type="button" id="btnCancel" name="btnCancel">ล้างข้อมูล</button>
					</div>
                </div>
            </div>
        </div>

<div id="dlgDelete" style="display:none;">
	<form action="${pageContext.request.contextPath}/backend/account" onsubmit="return remove_item()">
		<div class="fg-black" style="text-align: center;">
			<div style="margin: 30px; margin-top: 10px;">ต้องการลบข้อมูล?</div>
			<div>
				<button class="button primary" id="btnDelete" name="btnDelete">ตกลง</button>
				<button class="button" type="button" onclick="$.Dialog.close()">ยกเลิก</button>
			</div>
		</div>
	</form>
</div>	
